<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>HTML拾色器 </title> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="renderer" content="webkit"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <meta name="keywords" content="拾色器工具"> 
  <meta name="description" content="在线拾色器"> 
  <link href="css/bootstrap.min.css" rel="stylesheet"> 
  <link rel="stylesheet" href="css/common.css"> 
  <link rel="stylesheet" type="text/css" href="css/tools.css"> 
 </head> 
 <body> 
  <!--在线工具头部--> 
  <!-- 顶部广告 --> 
  <div id="topbanner" style="display: none;"> 
   <div class="close-topbox close_top_ad"> 
    <i class="i-icon i-icon-close i-icon-close"></i> 
   </div> 
  </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="fl sig-box"> 
     </div> 
    </div> 
   </div> 
  </div> 
  <!--横版广告放置--> 
  <div class="tool-top-ad" style="max-width: 100%;margin:0 auto;"> 
   <div class="abox-novip-item" style="display:none;"> 
    <div class="abox-content"> 
     <div class="wwads-cn wwads-horizontal" data-id="153" style="max-width:1200px;max-height:150px;margin:0 auto;"></div> 
    </div>
   </div> 
   <script>
(function() {

        CLIP_HOST = 'https://cdn.wwads.cn/js/makemoney.js'; 
        var x = document.createElement('SCRIPT');
    x.type = 'text/javascript';
    x.src = CLIP_HOST;
    x.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(x);
})();
</script>
  </div> 
  <!--header end--> 
  <script>
var apppath = '/tools/index'+location.search;
var domain  = '//www.w3cschool.cn';
</script> 
  <div id="wrapper" class="article-body"> 
   <div class="article-intro" id="content"> 
    <style>
#selectedcolor {
border:1px solid #e3e3e3;
width:80%;
height:300px;
margin:auto;
}
#divpreview {
border:1px solid #e3e3e3;
width:80px;
height:20px;
margin:auto;
visibility:hidden;
}
.colorTable, #colorhexDIV, #colorrgbDIV, #colorhsvDIV, #colorhslDIV, #colornamDIV {
font-family:Consolas, 'Courier New', Courier, monospace;
}
#colorhexDIV, #colorrgbDIV, #colorhslDIV, #colorhsvDIV, #colornamDIV {
font-size:18px;
}
#wronginputDIV {
text-align:left;
position:absolute;
margin:4px 10px;
color:#a94442;
display:none;
}
.has-error input{
border:1px solid red;
}
#entercolorDIV input,#entercolorDIV button{
height:28px;
}
#entercolorDIV input{
width:80%;
border:1px solid #d3d3d3;
border-right:none;
}
</style> 
    <script>
(function(){var trimLeft=/^\s+/,trimRight=/\s+$/,tinyCounter=0,math=Math,mathRound=math.round,mathMin=math.min,mathMax=math.max,mathRandom=math.random;function tinycolor(color,opts){color=(color)?color:"";opts=opts||{};if(color instanceof tinycolor){return color}if(!(this instanceof tinycolor)){return new tinycolor(color,opts)}var rgb=inputToRGB(color);this._originalInput=color,this._r=rgb.r,this._g=rgb.g,this._b=rgb.b,this._a=rgb.a,this._roundA=mathRound(100*this._a)/100,this._format=opts.format||rgb.format;this._gradientType=opts.gradientType;if(this._r<1){this._r=mathRound(this._r)}if(this._g<1){this._g=mathRound(this._g)}if(this._b<1){this._b=mathRound(this._b)}this._ok=rgb.ok;this._tc_id=tinyCounter++}tinycolor.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return !this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var rgb=this.toRgb();return(rgb.r*299+rgb.g*587+rgb.b*114)/1000},getLuminance:function(){var rgb=this.toRgb();var RsRGB,GsRGB,BsRGB,R,G,B;RsRGB=rgb.r/255;GsRGB=rgb.g/255;BsRGB=rgb.b/255;if(RsRGB<=0.03928){R=RsRGB/12.92}else{R=Math.pow(((RsRGB+0.055)/1.055),2.4)}if(GsRGB<=0.03928){G=GsRGB/12.92}else{G=Math.pow(((GsRGB+0.055)/1.055),2.4)}if(BsRGB<=0.03928){B=BsRGB/12.92}else{B=Math.pow(((BsRGB+0.055)/1.055),2.4)}return(0.2126*R)+(0.7152*G)+(0.0722*B)},setAlpha:function(value){this._a=boundAlpha(value);this._roundA=mathRound(100*this._a)/100;return this},toHsv:function(){var hsv=rgbToHsv(this._r,this._g,this._b);return{h:hsv.h*360,s:hsv.s,v:hsv.v,a:this._a}},toHsvString:function(){var hsv=rgbToHsv(this._r,this._g,this._b);var h=mathRound(hsv.h*360),s=mathRound(hsv.s*100),v=mathRound(hsv.v*100);return(this._a==1)?"hsv("+h+", "+s+"%, "+v+"%)":"hsva("+h+", "+s+"%, "+v+"%, "+this._roundA+")"},toHsl:function(){var hsl=rgbToHsl(this._r,this._g,this._b);return{h:hsl.h*360,s:hsl.s,l:hsl.l,a:this._a}},toHslString:function(){var hsl=rgbToHsl(this._r,this._g,this._b);var h=mathRound(hsl.h*360),s=mathRound(hsl.s*100),l=mathRound(hsl.l*100);return(this._a==1)?"hsl("+h+", "+s+"%, "+l+"%)":"hsla("+h+", "+s+"%, "+l+"%, "+this._roundA+")"},toHex:function(allow3Char){return rgbToHex(this._r,this._g,this._b,allow3Char)},toHexString:function(allow3Char){return"#"+this.toHex(allow3Char)},toHex8:function(){return rgbaToHex(this._r,this._g,this._b,this._a)},toHex8String:function(){return"#"+this.toHex8()},toRgb:function(){return{r:mathRound(this._r),g:mathRound(this._g),b:mathRound(this._b),a:this._a}},toRgbString:function(){return(this._a==1)?"rgb("+mathRound(this._r)+", "+mathRound(this._g)+", "+mathRound(this._b)+")":"rgba("+mathRound(this._r)+", "+mathRound(this._g)+", "+mathRound(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:mathRound(bound01(this._r,255)*100)+"%",g:mathRound(bound01(this._g,255)*100)+"%",b:mathRound(bound01(this._b,255)*100)+"%",a:this._a}},toPercentageRgbString:function(){return(this._a==1)?"rgb("+mathRound(bound01(this._r,255)*100)+"%, "+mathRound(bound01(this._g,255)*100)+"%, "+mathRound(bound01(this._b,255)*100)+"%)":"rgba("+mathRound(bound01(this._r,255)*100)+"%, "+mathRound(bound01(this._g,255)*100)+"%, "+mathRound(bound01(this._b,255)*100)+"%, "+this._roundA+")"},toName:function(){if(this._a===0){return"transparent"}if(this._a<1){return false}return hexNames[rgbToHex(this._r,this._g,this._b,true)]||false},toFilter:function(secondColor){var hex8String="#"+rgbaToHex(this._r,this._g,this._b,this._a);var secondHex8String=hex8String;var gradientType=this._gradientType?"GradientType = 1, ":"";if(secondColor){var s=tinycolor(secondColor);secondHex8String=s.toHex8String()}return"progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"},toString:function(format){var formatSet=!!format;format=format||this._format;var formattedString=false;var hasAlpha=this._a<1&&this._a>=0;var needsAlphaFormat=!formatSet&&hasAlpha&&(format==="hex"||format==="hex6"||format==="hex3"||format==="name");if(needsAlphaFormat){if(format==="name"&&this._a===0){return this.toName()}return this.toRgbString()}if(format==="rgb"){formattedString=this.toRgbString()}if(format==="prgb"){formattedString=this.toPercentageRgbString()}if(format==="hex"||format==="hex6"){formattedString=this.toHexString()}if(format==="hex3"){formattedString=this.toHexString(true)}if(format==="hex8"){formattedString=this.toHex8String()}if(format==="name"){formattedString=this.toName()}if(format==="hsl"){formattedString=this.toHslString()}if(format==="hsv"){formattedString=this.toHsvString()}return formattedString||this.toHexString()},clone:function(){return tinycolor(this.toString())},_applyModification:function(fn,args){var color=fn.apply(null,[this].concat([].slice.call(args)));this._r=color._r;this._g=color._g;this._b=color._b;this.setAlpha(color._a);return this},lighten:function(){return this._applyModification(lighten,arguments)
},brighten:function(){return this._applyModification(brighten,arguments)},darken:function(){return this._applyModification(darken,arguments)},desaturate:function(){return this._applyModification(desaturate,arguments)},saturate:function(){return this._applyModification(saturate,arguments)},greyscale:function(){return this._applyModification(greyscale,arguments)},spin:function(){return this._applyModification(spin,arguments)},_applyCombination:function(fn,args){return fn.apply(null,[this].concat([].slice.call(args)))},analogous:function(){return this._applyCombination(analogous,arguments)},complement:function(){return this._applyCombination(complement,arguments)},monochromatic:function(){return this._applyCombination(monochromatic,arguments)},splitcomplement:function(){return this._applyCombination(splitcomplement,arguments)},triad:function(){return this._applyCombination(triad,arguments)},tetrad:function(){return this._applyCombination(tetrad,arguments)}};tinycolor.fromRatio=function(color,opts){if(typeof color=="object"){var newColor={};for(var i in color){if(color.hasOwnProperty(i)){if(i==="a"){newColor[i]=color[i]}else{newColor[i]=convertToPercentage(color[i])}}}color=newColor}return tinycolor(color,opts)};function inputToRGB(color){var rgb={r:0,g:0,b:0};var a=1;var ok=false;var format=false;if(typeof color=="string"){color=stringInputToObject(color)}if(typeof color=="object"){if(color.hasOwnProperty("r")&&color.hasOwnProperty("g")&&color.hasOwnProperty("b")){rgb=rgbToRgb(color.r,color.g,color.b);ok=true;format=String(color.r).substr(-1)==="%"?"prgb":"rgb"}else{if(color.hasOwnProperty("h")&&color.hasOwnProperty("s")&&color.hasOwnProperty("v")){color.s=convertToPercentage(color.s);color.v=convertToPercentage(color.v);rgb=hsvToRgb(color.h,color.s,color.v);ok=true;format="hsv"}else{if(color.hasOwnProperty("h")&&color.hasOwnProperty("s")&&color.hasOwnProperty("l")){color.s=convertToPercentage(color.s);color.l=convertToPercentage(color.l);rgb=hslToRgb(color.h,color.s,color.l);ok=true;format="hsl"}}}if(color.hasOwnProperty("a")){a=color.a}}a=boundAlpha(a);return{ok:ok,format:color.format||format,r:mathMin(255,mathMax(rgb.r,0)),g:mathMin(255,mathMax(rgb.g,0)),b:mathMin(255,mathMax(rgb.b,0)),a:a}}function rgbToRgb(r,g,b){return{r:bound01(r,255)*255,g:bound01(g,255)*255,b:bound01(b,255)*255}}function rgbToHsl(r,g,b){r=bound01(r,255);g=bound01(g,255);b=bound01(b,255);var max=mathMax(r,g,b),min=mathMin(r,g,b);var h,s,l=(max+min)/2;if(max==min){h=s=0}else{var d=max-min;s=l>0.5?d/(2-max-min):d/(max+min);switch(max){case r:h=(g-b)/d+(g<b?6:0);break;case g:h=(b-r)/d+2;break;case b:h=(r-g)/d+4;break}h/=6}return{h:h,s:s,l:l}}function hslToRgb(h,s,l){var r,g,b;h=bound01(h,360);s=bound01(s,100);l=bound01(l,100);function hue2rgb(p,q,t){if(t<0){t+=1}if(t>1){t-=1}if(t<1/6){return p+(q-p)*6*t}if(t<1/2){return q}if(t<2/3){return p+(q-p)*(2/3-t)*6}return p}if(s===0){r=g=b=l}else{var q=l<0.5?l*(1+s):l+s-l*s;var p=2*l-q;r=hue2rgb(p,q,h+1/3);g=hue2rgb(p,q,h);b=hue2rgb(p,q,h-1/3)}return{r:r*255,g:g*255,b:b*255}}function rgbToHsv(r,g,b){r=bound01(r,255);g=bound01(g,255);b=bound01(b,255);var max=mathMax(r,g,b),min=mathMin(r,g,b);var h,s,v=max;var d=max-min;s=max===0?0:d/max;if(max==min){h=0}else{switch(max){case r:h=(g-b)/d+(g<b?6:0);break;case g:h=(b-r)/d+2;break;case b:h=(r-g)/d+4;break}h/=6}return{h:h,s:s,v:v}}function hsvToRgb(h,s,v){h=bound01(h,360)*6;s=bound01(s,100);v=bound01(v,100);var i=math.floor(h),f=h-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s),mod=i%6,r=[v,q,p,p,t,v][mod],g=[t,v,v,q,p,p][mod],b=[p,p,t,v,v,q][mod];return{r:r*255,g:g*255,b:b*255}}function rgbToHex(r,g,b,allow3Char){var hex=[pad2(mathRound(r).toString(16)),pad2(mathRound(g).toString(16)),pad2(mathRound(b).toString(16))];if(allow3Char&&hex[0].charAt(0)==hex[0].charAt(1)&&hex[1].charAt(0)==hex[1].charAt(1)&&hex[2].charAt(0)==hex[2].charAt(1)){return hex[0].charAt(0)+hex[1].charAt(0)+hex[2].charAt(0)}return hex.join("")}function rgbaToHex(r,g,b,a){var hex=[pad2(convertDecimalToHex(a)),pad2(mathRound(r).toString(16)),pad2(mathRound(g).toString(16)),pad2(mathRound(b).toString(16))];return hex.join("")}tinycolor.equals=function(color1,color2){if(!color1||!color2){return false}return tinycolor(color1).toRgbString()==tinycolor(color2).toRgbString()};tinycolor.random=function(){return tinycolor.fromRatio({r:mathRandom(),g:mathRandom(),b:mathRandom()})};function desaturate(color,amount){amount=(amount===0)?0:(amount||10);var hsl=tinycolor(color).toHsl();hsl.s-=amount/100;hsl.s=clamp01(hsl.s);return tinycolor(hsl)}function saturate(color,amount){amount=(amount===0)?0:(amount||10);var hsl=tinycolor(color).toHsl();hsl.s+=amount/100;hsl.s=clamp01(hsl.s);return tinycolor(hsl)}function greyscale(color){return tinycolor(color).desaturate(100)}function lighten(color,amount){amount=(amount===0)?0:(amount||10);var hsl=tinycolor(color).toHsl();hsl.l+=amount/100;hsl.l=clamp01(hsl.l);return tinycolor(hsl)}function brighten(color,amount){amount=(amount===0)?0:(amount||10);var rgb=tinycolor(color).toRgb();
rgb.r=mathMax(0,mathMin(255,rgb.r-mathRound(255*-(amount/100))));rgb.g=mathMax(0,mathMin(255,rgb.g-mathRound(255*-(amount/100))));rgb.b=mathMax(0,mathMin(255,rgb.b-mathRound(255*-(amount/100))));return tinycolor(rgb)}function darken(color,amount){amount=(amount===0)?0:(amount||10);var hsl=tinycolor(color).toHsl();hsl.l-=amount/100;hsl.l=clamp01(hsl.l);return tinycolor(hsl)}function spin(color,amount){var hsl=tinycolor(color).toHsl();var hue=(mathRound(hsl.h)+amount)%360;hsl.h=hue<0?360+hue:hue;return tinycolor(hsl)}function complement(color){var hsl=tinycolor(color).toHsl();hsl.h=(hsl.h+180)%360;return tinycolor(hsl)}function triad(color){var hsl=tinycolor(color).toHsl();var h=hsl.h;return[tinycolor(color),tinycolor({h:(h+120)%360,s:hsl.s,l:hsl.l}),tinycolor({h:(h+240)%360,s:hsl.s,l:hsl.l})]}function tetrad(color){var hsl=tinycolor(color).toHsl();var h=hsl.h;return[tinycolor(color),tinycolor({h:(h+90)%360,s:hsl.s,l:hsl.l}),tinycolor({h:(h+180)%360,s:hsl.s,l:hsl.l}),tinycolor({h:(h+270)%360,s:hsl.s,l:hsl.l})]}function splitcomplement(color){var hsl=tinycolor(color).toHsl();var h=hsl.h;return[tinycolor(color),tinycolor({h:(h+72)%360,s:hsl.s,l:hsl.l}),tinycolor({h:(h+216)%360,s:hsl.s,l:hsl.l})]}function analogous(color,results,slices){results=results||6;slices=slices||30;var hsl=tinycolor(color).toHsl();var part=360/slices;var ret=[tinycolor(color)];for(hsl.h=((hsl.h-(part*results>>1))+720)%360;--results;){hsl.h=(hsl.h+part)%360;ret.push(tinycolor(hsl))}return ret}function monochromatic(color,results){results=results||6;var hsv=tinycolor(color).toHsv();var h=hsv.h,s=hsv.s,v=hsv.v;var ret=[];var modification=1/results;while(results--){ret.push(tinycolor({h:h,s:s,v:v}));v=(v+modification)%1}return ret}tinycolor.mix=function(color1,color2,amount){amount=(amount===0)?0:(amount||50);var rgb1=tinycolor(color1).toRgb();var rgb2=tinycolor(color2).toRgb();var p=amount/100;var w=p*2-1;var a=rgb2.a-rgb1.a;var w1;if(w*a==-1){w1=w}else{w1=(w+a)/(1+w*a)}w1=(w1+1)/2;var w2=1-w1;var rgba={r:rgb2.r*w1+rgb1.r*w2,g:rgb2.g*w1+rgb1.g*w2,b:rgb2.b*w1+rgb1.b*w2,a:rgb2.a*p+rgb1.a*(1-p)};return tinycolor(rgba)};tinycolor.readability=function(color1,color2){var c1=tinycolor(color1);var c2=tinycolor(color2);return(Math.max(c1.getLuminance(),c2.getLuminance())+0.05)/(Math.min(c1.getLuminance(),c2.getLuminance())+0.05)};tinycolor.isReadable=function(color1,color2,wcag2){var readability=tinycolor.readability(color1,color2);var wcag2Parms,out;out=false;wcag2Parms=validateWCAG2Parms(wcag2);switch(wcag2Parms.level+wcag2Parms.size){case"AAsmall":case"AAAlarge":out=readability>=4.5;break;case"AAlarge":out=readability>=3;break;case"AAAsmall":out=readability>=7;break}return out};tinycolor.mostReadable=function(baseColor,colorList,args){var bestColor=null;var bestScore=0;var readability;var includeFallbackColors,level,size;args=args||{};includeFallbackColors=args.includeFallbackColors;level=args.level;size=args.size;for(var i=0;i<colorList.length;i++){readability=tinycolor.readability(baseColor,colorList[i]);if(readability>bestScore){bestScore=readability;bestColor=tinycolor(colorList[i])}}if(tinycolor.isReadable(baseColor,bestColor,{"level":level,"size":size})||!includeFallbackColors){return bestColor}else{args.includeFallbackColors=false;return tinycolor.mostReadable(baseColor,["#fff","#000"],args)}};var names=tinycolor.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",rebeccapurple:"663399",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"};
var hexNames=tinycolor.hexNames=flip(names);function flip(o){var flipped={};for(var i in o){if(o.hasOwnProperty(i)){flipped[o[i]]=i}}return flipped}function boundAlpha(a){a=parseFloat(a);if(isNaN(a)||a<0||a>1){a=1}return a}function bound01(n,max){if(isOnePointZero(n)){n="100%"}var processPercent=isPercentage(n);n=mathMin(max,mathMax(0,parseFloat(n)));if(processPercent){n=parseInt(n*max,10)/100}if((math.abs(n-max)<0.000001)){return 1}return(n%max)/parseFloat(max)}function clamp01(val){return mathMin(1,mathMax(0,val))}function parseIntFromHex(val){return parseInt(val,16)}function isOnePointZero(n){return typeof n=="string"&&n.indexOf(".")!=-1&&parseFloat(n)===1}function isPercentage(n){return typeof n==="string"&&n.indexOf("%")!=-1}function pad2(c){return c.length==1?"0"+c:""+c}function convertToPercentage(n){if(n<=1){n=(n*100)+"%"}return n}function convertDecimalToHex(d){return Math.round(parseFloat(d)*255).toString(16)}function convertHexToDecimal(h){return(parseIntFromHex(h)/255)}var matchers=(function(){var CSS_INTEGER="[-\\+]?\\d+%?";var CSS_NUMBER="[-\\+]?\\d*\\.\\d+%?";var CSS_UNIT="(?:"+CSS_NUMBER+")|(?:"+CSS_INTEGER+")";var PERMISSIVE_MATCH3="[\\s|\\(]+("+CSS_UNIT+")[,|\\s]+("+CSS_UNIT+")[,|\\s]+("+CSS_UNIT+")\\s*\\)?";var PERMISSIVE_MATCH4="[\\s|\\(]+("+CSS_UNIT+")[,|\\s]+("+CSS_UNIT+")[,|\\s]+("+CSS_UNIT+")[,|\\s]+("+CSS_UNIT+")\\s*\\)?";return{rgb:new RegExp("rgb"+PERMISSIVE_MATCH3),rgba:new RegExp("rgba"+PERMISSIVE_MATCH4),hsl:new RegExp("hsl"+PERMISSIVE_MATCH3),hsla:new RegExp("hsla"+PERMISSIVE_MATCH4),hsv:new RegExp("hsv"+PERMISSIVE_MATCH3),hsva:new RegExp("hsva"+PERMISSIVE_MATCH4),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/}})();function stringInputToObject(color){color=color.replace(trimLeft,"").replace(trimRight,"").toLowerCase();var named=false;if(names[color]){color=names[color];named=true}else{if(color=="transparent"){return{r:0,g:0,b:0,a:0,format:"name"}}}var match;if((match=matchers.rgb.exec(color))){return{r:match[1],g:match[2],b:match[3]}}if((match=matchers.rgba.exec(color))){return{r:match[1],g:match[2],b:match[3],a:match[4]}}if((match=matchers.hsl.exec(color))){return{h:match[1],s:match[2],l:match[3]}}if((match=matchers.hsla.exec(color))){return{h:match[1],s:match[2],l:match[3],a:match[4]}}if((match=matchers.hsv.exec(color))){return{h:match[1],s:match[2],v:match[3]}}if((match=matchers.hsva.exec(color))){return{h:match[1],s:match[2],v:match[3],a:match[4]}}if((match=matchers.hex8.exec(color))){return{a:convertHexToDecimal(match[1]),r:parseIntFromHex(match[2]),g:parseIntFromHex(match[3]),b:parseIntFromHex(match[4]),format:named?"name":"hex8"}}if((match=matchers.hex6.exec(color))){return{r:parseIntFromHex(match[1]),g:parseIntFromHex(match[2]),b:parseIntFromHex(match[3]),format:named?"name":"hex"}}if((match=matchers.hex3.exec(color))){return{r:parseIntFromHex(match[1]+""+match[1]),g:parseIntFromHex(match[2]+""+match[2]),b:parseIntFromHex(match[3]+""+match[3]),format:named?"name":"hex"}}return false}function validateWCAG2Parms(parms){var level,size;parms=parms||{"level":"AA","size":"small"};level=(parms.level||"AA").toUpperCase();size=(parms.size||"small").toLowerCase();if(level!=="AA"&&level!=="AAA"){level="AA"}if(size!=="small"&&size!=="large"){size="small"}return{"level":level,"size":size}}if(typeof module!=="undefined"&&module.exports){module.exports=tinycolor}else{if(typeof define==="function"&&define.amd){define(function(){return tinycolor})}else{window.tinycolor=tinycolor}}})();
</script> 
    <script>
<!--
var colorhex = "FF0000";
function mouseOverColor(hex) {
document.getElementById("divpreview").style.visibility = "visible";
document.getElementById("divpreview").style.backgroundColor = hex;
document.body.style.cursor = "pointer";
}
function mouseOutMap() {
if (hh == 0) {
document.getElementById("divpreview").style.visibility = "hidden";
} else {
hh = 0;
}
document.getElementById("divpreview").style.backgroundColor = "#" + colorhex;
document.body.style.cursor = "";
}
var hh = 0;
function clickColor(hex, seltop, selleft, html5) {
var c;
if (html5 && html5 == 5){
c = document.getElementById("html5colorpicker").value;
} else {
if (hex == 0){
c = document.getElementById("entercolor").value;
} else {
c = hex;
}
}
colorhex = tinycolor(c).toHexString();
if (tinycolor(c).isValid()) {
clearWrongInput();
} else {
wrongInput();
return;
}
r = tinycolor(c).toRgb().r;
g = tinycolor(c).toRgb().g;
b = tinycolor(c).toRgb().b;
document.getElementById("colornamDIV").innerHTML = (tinycolor(colorhex).toName() || "");
document.getElementById("colorhexDIV").innerHTML = tinycolor(colorhex).toHexString();
document.getElementById("colorrgbDIV").innerHTML = tinycolor(colorhex).toRgbString();
document.getElementById("colorhslDIV").innerHTML = tinycolor(colorhex).toHslString();    
document.getElementById("colorhsvDIV").innerHTML = tinycolor(colorhex).toHsvString();        
if ((seltop+200)>-1 && selleft>-1) {
document.getElementById("selectedhexagon").style.top=seltop + "px";
document.getElementById("selectedhexagon").style.left=selleft + "px";
document.getElementById("selectedhexagon").style.visibility="visible";
} else {
document.getElementById("divpreview").style.backgroundColor = tinycolor(colorhex).toHexString();
document.getElementById("selectedhexagon").style.visibility = "hidden";
}
document.getElementById("selectedcolor").style.backgroundColor = tinycolor(colorhex).toHexString();
document.getElementById("html5colorpicker").value = tinycolor(colorhex).toHexString();  
  document.getElementById('slideRed').value = r;
  document.getElementById('slideGreen').value = g;
  document.getElementById('slideBlue').value = b;
  changeRed(r);changeGreen(g);changeBlue(b);
  changeColor();
  document.getElementById("fixed").style.backgroundColor = tinycolor(colorhex).toHexString();
}
function wrongInput() {
document.getElementById("entercolorDIV").className = "has-error";
document.getElementById("wronginputDIV").style.display = "block";
}
function clearWrongInput() {
document.getElementById("entercolorDIV").className = "";
document.getElementById("wronginputDIV").style.display = "none";
}
function changeRed(value) {
document.getElementById('valRed').innerHTML = value;
changeAll();
}
function changeGreen(value) {
document.getElementById('valGreen').innerHTML = value;
changeAll();
}
function changeBlue(value) {
document.getElementById('valBlue').innerHTML = value;
changeAll();
}
function changeAll() {
var r = document.getElementById('valRed').innerHTML;
var g = document.getElementById('valGreen').innerHTML;
var b = document.getElementById('valBlue').innerHTML;
document.getElementById('change').style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
document.getElementById('changetxt').innerHTML = "rgb(" + r + ", " + g + ", " + b + ")";
document.getElementById('changetxthex').innerHTML = tinycolor("rgb(" + r + "," + g + "," + b + ")").toHexString();
}

function hslLum_top() {
  var i, a, match;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hslObj = tinycolor(color).toHsl();
  var h = hslObj.h;
  var s = hslObj.s;
  var l = hslObj.l;
  var arr = [];
  for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsl(" + h + "," + s + "," + (i * 0.05) + ")"));
  }
  arr.reverse();
  a = "<h3 style='text-align: center !important;'>淡 / 暗:</h3><table class='colorTable' style='width:100%;'>";
  //a += "<tr>";
  //a += "<td style='width:40px;'></td>";
  //a += "<td style='text-align:center;'><h3>淡 / 暗</h3></td>";
  //a += "<td style='width:80px;'></td>";
  //a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(l * 100) == Math.round(tinycolor(arr[i]).toHsl().l * 100)) {
a += "<tr><td></td><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='text-align:right;'><b>" + Math.round(l * 100) + "%&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'><br><br></td>";
a += "<td>&nbsp;<b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td><td></td></tr>";
match = 1;      
} else {
if (match == 0 && l > tinycolor(arr[i]).toHsl().l) {
a += "<tr><td></td><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='text-align:right;'><b>" + Math.round(l * 100) + "%&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'></td>";
a += "<td>&nbsp;<b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td><td></td></tr>";
match = 1;
}
a += "<tr>";
a += "<td style='width:40px;text-align:right;'>" + Math.round(tinycolor(arr[i]).toHsl().l * 100) + "%&nbsp;</td>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td style='width:80px;'>&nbsp;" + tinycolor(arr[i]).toHexString() + "</td>";
a += "</tr>";
}
  }
  a += "</table>";
  document.getElementById("lumtopcontainer").innerHTML = a;
}

function hslHue_top() {
  var i, a, match, loopH;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hslObj = tinycolor(color).toHsl();
  var h = hslObj.h;
  var s = hslObj.s;
  var l = hslObj.l;
  var arr = [];
  for (i = 0; i <= 12; i++) {
arr.push(tinycolor("hsl(" + (i * 30) + "," + s + "," + l + ")"));
  }
  a = "<table class='colorTable' style='width:100%;line-height:1.95;'>";
  a += "<tr>";
  a += "<td style='width:40px;'></td>";
  a += "<td style='text-align:center;line-height:1.5'><h3>Hue:</h3></td>";
  a += "<td style='width:80px;'></td>";
  a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
loopH = Math.round(tinycolor(arr[i]).toHsl().h)
if (i == arr.length - 1) {loopH = 360;}
if (match == 0 && Math.round(h) == loopH) {
a += "<tr><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='width:40px;text-align:right;'><b>" + Math.round(h) + "&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'><br><br></td>";
a += "<td style='width:80px;'><b>&nbsp;" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td></tr>";
match = 1;      
} else {
if (match == 0 && Math.round(h) < loopH) {
a += "<tr><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='width:40px;text-align:right;'><b>" + Math.round(h) + "&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'></td>";
a += "<td style='width:80px;'><b>&nbsp;" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td></tr>";
match = 1;
}
a += "<tr>";
a += "<td style='width:40px;text-align:right;'>" + loopH + "&nbsp;</td>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td style='width:80px;'>&nbsp;" + tinycolor(arr[i]).toHexString() + "</td>";
a += "</tr>";
}
  }
  a += "</table>";
  document.getElementById("huetopcontainer").innerHTML = a;
}

function hslHue() {
  var i, a, match, loopH;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hslObj = tinycolor(color).toHsl();
  var h = hslObj.h;
  var s = hslObj.s;
  var l = hslObj.l;
  var arr = [];
  for (i = 0; i <= 24; i++) {
arr.push(tinycolor("hsl(" + (i * 15) + "," + s + "," + l + ")"));
  }
  a = "<h3>Hue</h3>";
  a += "<div class='table-responsive'>";
  a += "<table class='reference' style='width:100%;white-space: nowrap;font-size:14px;'>";
  a += "<tr>";
  a += "<td style='width:150px;'></td>";
  a += "<td style='text-align:right;'>Hue&nbsp;</td>";
  a += "<td>Hex</td>";
  a += "<td>Rgb</td>";
  a += "<td>Hsl</td>";
  a += "<td>Hsv</td>";  
  a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
loopH = Math.round(tinycolor(arr[i]).toHsl().h)
if (i == arr.length - 1) {loopH = 360;}
if (match == 0 && Math.round(h) == loopH) {
a += "<tr>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'></td>";
a += "<td style='text-align:right;'><b>" + Math.round(h) + "&nbsp;</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toRgbString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHslString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHsvString() + "</b></td>";
a += "</tr>";
match = 1;      
} else {
if (match == 0 && Math.round(h) < loopH) {
a += "<tr>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'></td>";
a += "<td style='text-align:right;'><b>" + Math.round(h) + "&nbsp;</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toRgbString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHslString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHsvString() + "&nbsp;</b></td>";
a += "</tr>";
match = 1;
}
a += "<tr>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td style='text-align:right;'>" + loopH + "&nbsp;</td>";
a += "<td>" + tinycolor(arr[i]).toHexString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toRgbString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toHslString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toHsvString() + "</td>";                  
a += "</tr>";
}
  }
  a += "</table></div>";
  document.getElementById("huecontainer").innerHTML = a;
}

function hslSat() {
  var i, a, match, loopH;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hslObj = tinycolor(color).toHsl();
  var h = hslObj.h;
  var s = hslObj.s;
  var l = hslObj.l;
  var arr = [];
  for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsl(" + h + "," + (i * 0.05) + "," + l + ")"));
  }
  arr.reverse();
  a = "<h3>HSL Saturation</h3>";
  a += "<div class='table-responsive'>";
  a += "<table class='reference' style='width:100%;white-space: nowrap;font-size:14px;'>";
  a += "<tr>";
  a += "<td style='width:150px;'></td>";
  a += "<td style='text-align:right;'>Sat&nbsp;</td>";
  a += "<td>Hex</td>";
  a += "<td>Rgb</td>";
  a += "<td>Hsl</td>";
  a += "<td>Hsv</td>";  
  a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(s * 100) == Math.round(tinycolor(arr[i]).toHsl().s * 100)) {
a += "<tr>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'></td>";
a += "<td style='text-align:right;'><b>" + Math.round(tinycolor(hslObj).toHsl().s *100) + "%&nbsp;</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toRgbString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHslString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHsvString() + "</b></td>";
a += "</tr>";
match = 1;      
} else {
if (match == 0 && s > tinycolor(arr[i]).toHsl().s) {
a += "<tr>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'></td>";
a += "<td style='text-align:right;'><b>" + Math.round(tinycolor(hslObj).toHsl().s *100) + "%&nbsp;</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toRgbString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHslString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHsvString() + "&nbsp;</b></td>";
a += "</tr>";
match = 1;
}
a += "<tr>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td style='text-align:right;'>" + Math.round(tinycolor(arr[i]).toHsl().s *100) + "%&nbsp;</td>";
a += "<td>" + tinycolor(arr[i]).toHexString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toRgbString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toHslString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toHsvString() + "</td>";                  
a += "</tr>";
}
  }
  a += "</table></div>";
  document.getElementById("hslsatcontainer").innerHTML = a;
}

function hslLum() {
  var i, a, match, loopH;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hslObj = tinycolor(color).toHsl();
  var h = hslObj.h;
  var s = hslObj.s;
  var l = hslObj.l;
  var arr = [];
  for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsl(" + h + "," + s + "," + (i * 0.05) + ")"));
  }
  arr.reverse();
  a = "<h3>HSL 淡 / 暗</h3>";
  a += "<div class='table-responsive'>";
  a += "<table class='reference' style='width:100%;white-space: nowrap;font-size:14px;'>";
  a += "<tr>";
  a += "<td style='width:150px;'></td>";
  a += "<td style='text-align:right;'>Lum&nbsp;</td>";
  a += "<td>Hex</td>";
  a += "<td>Rgb</td>";
  a += "<td>Hsl</td>";
  a += "<td>Hsv</td>";  
  a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(l * 100) == Math.round(tinycolor(arr[i]).toHsl().l * 100)) {
a += "<tr>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'></td>";
a += "<td style='text-align:right;'><b>" + Math.round(tinycolor(hslObj).toHsl().l *100) + "%&nbsp;</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toRgbString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHslString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHsvString() + "</b></td>";
a += "</tr>";
match = 1;      
} else {
if (match == 0 && l > tinycolor(arr[i]).toHsl().l) {
a += "<tr>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'></td>";
a += "<td style='text-align:right;'><b>" + Math.round(tinycolor(hslObj).toHsl().l * 100) + "%&nbsp;</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toRgbString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHslString() + "</b></td>";
a += "<td><b>" + tinycolor(hslObj).toHsvString() + "&nbsp;</b></td>";
a += "</tr>";
match = 1;
}
a += "<tr>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td style='text-align:right;'>" + Math.round(tinycolor(arr[i]).toHsl().l *100) + "%&nbsp;</td>";
a += "<td>" + tinycolor(arr[i]).toHexString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toRgbString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toHslString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toHsvString() + "</td>";                  
a += "</tr>";
}
  }
  a += "</table></div>";
  document.getElementById("hsllumcontainer").innerHTML = a;
}

function hsvSat() {
  var i, a, match, loopH;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hsvObj = tinycolor(color).toHsv();
  var h = hsvObj.h;
  var s = hsvObj.s;
  var v = hsvObj.v;
  var arr = [];
  for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsv(" + h + "," + (i * 0.05) + "," + v + ")"));
  }
  arr.reverse();
  a = "<h3>HSV Saturation</h3>";
  a += "<div class='table-responsive'>";
  a += "<table class='reference' style='width:100%;white-space: nowrap;font-size:14px;'>";
  a += "<tr>";
  a += "<td style='width:150px;'></td>";
  a += "<td style='text-align:right;'>Sat&nbsp;</td>";
  a += "<td>Hex</td>";
  a += "<td>Rgb</td>";
  a += "<td>Hsl</td>";
  a += "<td>Hsv</td>";  
  a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(s * 100) == Math.round(tinycolor(arr[i]).toHsv().s * 100)) {
a += "<tr>";
a += "<td style='background-color:" + tinycolor(hsvObj).toHexString() + "'></td>";
a += "<td style='text-align:right;'><b>" + Math.round(tinycolor(hsvObj).toHsv().s * 100) + "%&nbsp;</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHexString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toRgbString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHslString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHsvString() + "</b></td>";
a += "</tr>";
match = 1;      
} else {
if (match == 0 && s > tinycolor(arr[i]).toHsv().s) {
a += "<tr>";
a += "<td style='background-color:" + tinycolor(hsvObj).toHexString() + "'></td>";
a += "<td style='text-align:right;'><b>" + Math.round(tinycolor(hsvObj).toHsv().s * 100) + "%&nbsp;</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHexString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toRgbString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHslString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHsvString() + "&nbsp;</b></td>";
a += "</tr>";
match = 1;
}
a += "<tr>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td style='text-align:right;'>" + Math.round(tinycolor(arr[i]).toHsv().s * 100) + "%&nbsp;</td>";
a += "<td>" + tinycolor(arr[i]).toHexString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toRgbString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toHslString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toHsvString() + "</td>";                  
a += "</tr>";
}
  }
  a += "</table></div>";
  document.getElementById("hsvsatcontainer").innerHTML = a;
}

function hsvVal() {
  var i, a, match, loopH;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hsvObj = tinycolor(color).toHsv();
  var h = hsvObj.h;
  var s = hsvObj.s;
  var v = hsvObj.v;
  var arr = [];
  for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsv(" + h + "," + s + "," + (i * 0.05) + ")"));
  }
  arr.reverse();
  a = "<h3>HSV 亮 / 暗</h3>";
  a += "<div class='table-responsive'>";
  a += "<table class='reference' style='width:100%;white-space: nowrap;font-size:14px;'>";
  a += "<tr>";
  a += "<td style='width:150px;'></td>";
  a += "<td style='text-align:right;'>Value&nbsp;</td>";
  a += "<td>Hex</td>";
  a += "<td>Rgb</td>";
  a += "<td>Hsl</td>";
  a += "<td>Hsv</td>";  
  a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(v * 100) == Math.round(tinycolor(arr[i]).toHsv().v * 100)) {
a += "<tr>";
a += "<td style='background-color:" + tinycolor(hsvObj).toHexString() + "'></td>";
a += "<td style='text-align:right;'><b>" + Math.round(tinycolor(hsvObj).toHsv().v * 100) + "%&nbsp;</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHexString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toRgbString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHslString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHsvString() + "</b></td>";
a += "</tr>";
match = 1;      
} else {
if (match == 0 && v > tinycolor(arr[i]).toHsv().v) {
a += "<tr>";
a += "<td style='background-color:" + tinycolor(hsvObj).toHexString() + "'></td>";
a += "<td style='text-align:right;'><b>" + Math.round(tinycolor(hsvObj).toHsv().v * 100) + "%&nbsp;</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHexString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toRgbString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHslString() + "</b></td>";
a += "<td><b>" + tinycolor(hsvObj).toHsvString() + "&nbsp;</b></td>";
a += "</tr>";
match = 1;
}
a += "<tr>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td style='text-align:right;'>" + Math.round(tinycolor(arr[i]).toHsv().v * 100) + "%&nbsp;</td>";
a += "<td>" + tinycolor(arr[i]).toHexString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toRgbString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toHslString() + "</td>";
a += "<td>" + tinycolor(arr[i]).toHsvString() + "</td>";                  
a += "</tr>";
}
  }
  a += "</table></div>";
  document.getElementById("hsvvalcontainer").innerHTML = a;
}

function hsvBrighten() {
  var i, a, match;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hsvObj = tinycolor(color).toHsv();
  var h = hsvObj.h;
  var s = hsvObj.s;
  var v = hsvObj.v;
  var arr = [];
  for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsv(" + h + "," + s + "," + (i * 0.05) + ")"));
  }
  arr.reverse();
  a = "<table class='colorTable' style='width:100%;'>";
  a += "<tr>";
  a += "<td style='width:40px;'></td>";
  a += "<td style='text-align:center;'><h3>HSV<br>Brighten / Darken</h3></td>";
  a += "<td style='width:80px;'></td>";
  a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(v * 100) == Math.round(tinycolor(arr[i]).toHsv().v * 100)) {
a += "<tr><td></td><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='text-align:right;'><b>" + Math.round(v * 100) + "%&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hsvObj).toHexString() + "'><br><br></td>";
a += "<td><b>" + tinycolor(hsvObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td><td></td></tr>";
match = 1;      
} else {
if (match == 0 && v > tinycolor(arr[i]).toHsv().v) {
a += "<tr><td></td><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='text-align:right;'><b>" + Math.round(v * 100) + "%&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hsvObj).toHexString() + "'></td>";
a += "<td><b>" + tinycolor(hsvObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td><td></td></tr>";
match = 1;
}
a += "<tr>";
a += "<td style='width:40px;text-align:right;'>" + Math.round(tinycolor(arr[i]).toHsv().v * 100) + "%&nbsp;</td>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td style='width:80px;'>" + tinycolor(arr[i]).toHexString() + "</td>";
a += "</tr>";
}
  }
  a += "</table>";
  document.getElementById("hsvbrightencontainer").innerHTML = a;
}

function hsvSaturation() {
  var i, a, match;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hsvObj = tinycolor(color).toHsv();
  var h = hsvObj.h;
  var s = hsvObj.s;
  var v = hsvObj.v;
  var arr = [];
  for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsv(" + h + "," + (i * 0.05) + "," + v + ")"));
  }
  arr.reverse();
  a = "<table class='colorTable' style='width:100%;'>";
  a += "<tr>";
  a += "<td style='width:40px;'></td>";
  a += "<td style='text-align:center;'><h3>HSV<br>Saturation</h3></td>";
  a += "<td style='width:80px;'></td>";
  a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(s * 100) == Math.round(tinycolor(arr[i]).toHsv().s * 100)) {
a += "<tr><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='text-align:right;'><b>" + Math.round(s * 100) + "%&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hsvObj).toHexString() + "'><br><br></td>";
a += "<td><b>" + tinycolor(hsvObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td></tr>";
match = 1;      
} else {
if (match == 0 && s > tinycolor(arr[i]).toHsv().s) {
a += "<tr><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='text-align:right;'><b>" + Math.round(s * 100) + "%&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hsvObj).toHexString() + "'></td>";
a += "<td><b>&nbsp;" + tinycolor(hsvObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td></tr>";
match = 1;
}
a += "<tr>";
a += "<td style='text-align:right;'>" + Math.round(tinycolor(arr[i]).toHsv().s * 100) + "%&nbsp;</td>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td>&nbsp;" + tinycolor(arr[i]).toHexString() + "</td>";
a += "</tr>";
}
  }
  a += "</table>";
  document.getElementById("hsvsaturationcontainer").innerHTML = a;
}

function hslSaturation() {
  var i, a, match;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hslObj = tinycolor(color).toHsl();
  var h = hslObj.h;
  var s = hslObj.s;
  var l = hslObj.l;
  var arr = [];
  for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsl(" + h + "," + (i * 0.05) + "," + l + ")"));
  }
  arr.reverse();
  a = "<table class='colorTable' style='width:100%;'>";
  a += "<tr>";
  a += "<td style='width:40px;'></td>";
  a += "<td style='text-align:center;'><h3>HSL<br>Saturation</h3></td>";
  a += "<td style='width:80px;'></td>";
  a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(s * 100) == Math.round(tinycolor(arr[i]).toHsl().s * 100)) {
a += "<tr><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='text-align:right;'><b>" + Math.round(s * 100) + "%&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'><br><br></td>";
a += "<td><b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td></tr>";
match = 1;      
} else {
if (match == 0 && s > tinycolor(arr[i]).toHsl().s) {
a += "<tr><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='text-align:right;'><b>" + Math.round(s * 100) + "%&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'></td>";
a += "<td><b>&nbsp;" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td></tr>";
match = 1;
}
a += "<tr>";
a += "<td style='text-align:right;'>" + Math.round(tinycolor(arr[i]).toHsl().s * 100) + "%&nbsp;</td>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td>&nbsp;" + tinycolor(arr[i]).toHexString() + "</td>";
a += "</tr>";
}
  }
  a += "</table>";
  document.getElementById("saturationcontainer").innerHTML = a;
}

function hslLumen() {
  var i, a, match;
  var color = document.getElementById("colorhexDIV").innerHTML;
  var hslObj = tinycolor(color).toHsl();
  var h = hslObj.h;
  var s = hslObj.s;
  var l = hslObj.l;
  var arr = [];
  for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsl(" + h + "," + s + "," + (i * 0.05) + ")"));
  }
  arr.reverse();
  a = "<table class='colorTable' style='width:100%;'>";
  a += "<tr>";
  a += "<td style='width:40px;'></td>";
  a += "<td style='text-align:center;'><h3>HSL<br>淡 / 暗</h3></td>";
  a += "<td style='width:80px;'></td>";
  a += "</tr>";  
  match = 0;
  for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(l * 100) == Math.round(tinycolor(arr[i]).toHsl().l * 100)) {
a += "<tr><td></td><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='text-align:right;'><b>" + Math.round(l * 100) + "%&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'><br><br></td>";
a += "<td><b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td><td></td></tr>";
match = 1;      
} else {
if (match == 0 && l > tinycolor(arr[i]).toHsl().l) {
a += "<tr><td></td><td></td><td></td></tr>";
a += "<tr>";
a += "<td style='text-align:right;'><b>" + Math.round(l * 100) + "%&nbsp;</b></td>";
a += "<td style='background-color:" + tinycolor(hslObj).toHexString() + "'></td>";
a += "<td><b>" + tinycolor(hslObj).toHexString() + "</b></td>";
a += "</tr>";
a += "<tr><td></td><td></td><td></td></tr>";
match = 1;
}
a += "<tr>";
a += "<td style='width:40px;text-align:right;'>" + Math.round(tinycolor(arr[i]).toHsl().l * 100) + "%&nbsp;</td>";
a += "<td style='cursor:pointer;background-color:" + tinycolor(arr[i]).toHexString() + "' onclick='clickColor(\"" + tinycolor(arr[i]).toHexString() + "\")'></td>";
a += "<td style='width:80px;'>" + tinycolor(arr[i]).toHexString() + "</td>";
a += "</tr>";
}
  }
  a += "</table>";
  document.getElementById("lumencontainer").innerHTML = a;
}

function changeColor(value) {
//hslHue_top();
  hslLum_top();  
  hslHue();  
  hslSat();
  hslLum();
  hsvSat();
  hsvVal();  
  //hslSaturation();  
  //hslLumen();
  //hsvSaturation();
  //hsvBrighten();  
}

window.onload = function() {
var x = document.createElement("input");
x.setAttribute("type", "color");
if (x.type == "text") {
document.getElementById("html5DIV").style.visibility = "hidden";
}
}

function submitOnEnter(e) {
keyboardKey = e.which || e.keyCode;
if (keyboardKey == 13) {
clickColor(0,-1,-1);
}
}
//-->
</script> 
    <div id="wrapper" class="container-fluid">
     <!-- container-fluid --> 
     <div class="row"> 
      <div class="col-md-3 left-col">  
      </div> 
      <div class="content col-md-9"> 
       <h1>HTML <span class="color_h1">拾色器</span></h1> 
       <table class="reference" style="text-align: center;"> 
        <tbody>
         <tr> 
          <td width="33%"> <h3>选取颜色:</h3> 
           <div style="margin:auto;width:236px;"> 
            <img style="margin-right:2px;" src="images/img_colormap.gif" usemap="#colormap" alt="colormap">
            <map id="colormap" name="colormap" onmouseout="mouseOutMap()"><area style="cursor:pointer" shape="poly" coords="63,0,72,4,72,15,63,19,54,15,54,4" onclick="clickColor(&quot;#003366&quot;,-200,54)" onmouseover="mouseOverColor(&quot;#003366&quot;)" alt="#003366"><area style="cursor:pointer" shape="poly" coords="81,0,90,4,90,15,81,19,72,15,72,4" onclick="clickColor(&quot;#336699&quot;,-200,72)" onmouseover="mouseOverColor(&quot;#336699&quot;)" alt="#336699"><area style="cursor:pointer" shape="poly" coords="99,0,108,4,108,15,99,19,90,15,90,4" onclick="clickColor(&quot;#3366CC&quot;,-200,90)" onmouseover="mouseOverColor(&quot;#3366CC&quot;)" alt="#3366CC"><area style="cursor:pointer" shape="poly" coords="117,0,126,4,126,15,117,19,108,15,108,4" onclick="clickColor(&quot;#003399&quot;,-200,108)" onmouseover="mouseOverColor(&quot;#003399&quot;)" alt="#003399"><area style="cursor:pointer" shape="poly" coords="135,0,144,4,144,15,135,19,126,15,126,4" onclick="clickColor(&quot;#000099&quot;,-200,126)" onmouseover="mouseOverColor(&quot;#000099&quot;)" alt="#000099"><area style="cursor:pointer" shape="poly" coords="153,0,162,4,162,15,153,19,144,15,144,4" onclick="clickColor(&quot;#0000CC&quot;,-200,144)" onmouseover="mouseOverColor(&quot;#0000CC&quot;)" alt="#0000CC"><area style="cursor:pointer" shape="poly" coords="171,0,180,4,180,15,171,19,162,15,162,4" onclick="clickColor(&quot;#000066&quot;,-200,162)" onmouseover="mouseOverColor(&quot;#000066&quot;)" alt="#000066"><area style="cursor:pointer" shape="poly" coords="54,15,63,19,63,30,54,34,45,30,45,19" onclick="clickColor(&quot;#006666&quot;,-185,45)" onmouseover="mouseOverColor(&quot;#006666&quot;)" alt="#006666"><area style="cursor:pointer" shape="poly" coords="72,15,81,19,81,30,72,34,63,30,63,19" onclick="clickColor(&quot;#006699&quot;,-185,63)" onmouseover="mouseOverColor(&quot;#006699&quot;)" alt="#006699"><area style="cursor:pointer" shape="poly" coords="90,15,99,19,99,30,90,34,81,30,81,19" onclick="clickColor(&quot;#0099CC&quot;,-185,81)" onmouseover="mouseOverColor(&quot;#0099CC&quot;)" alt="#0099CC"><area style="cursor:pointer" shape="poly" coords="108,15,117,19,117,30,108,34,99,30,99,19" onclick="clickColor(&quot;#0066CC&quot;,-185,99)" onmouseover="mouseOverColor(&quot;#0066CC&quot;)" alt="#0066CC"><area style="cursor:pointer" shape="poly" coords="126,15,135,19,135,30,126,34,117,30,117,19" onclick="clickColor(&quot;#0033CC&quot;,-185,117)" onmouseover="mouseOverColor(&quot;#0033CC&quot;)" alt="#0033CC"><area style="cursor:pointer" shape="poly" coords="144,15,153,19,153,30,144,34,135,30,135,19" onclick="clickColor(&quot;#0000FF&quot;,-185,135)" onmouseover="mouseOverColor(&quot;#0000FF&quot;)" alt="#0000FF"><area style="cursor:pointer" shape="poly" coords="162,15,171,19,171,30,162,34,153,30,153,19" onclick="clickColor(&quot;#3333FF&quot;,-185,153)" onmouseover="mouseOverColor(&quot;#3333FF&quot;)" alt="#3333FF"><area style="cursor:pointer" shape="poly" coords="180,15,189,19,189,30,180,34,171,30,171,19" onclick="clickColor(&quot;#333399&quot;,-185,171)" onmouseover="mouseOverColor(&quot;#333399&quot;)" alt="#333399"><area style="cursor:pointer" shape="poly" coords="45,30,54,34,54,45,45,49,36,45,36,34" onclick="clickColor(&quot;#669999&quot;,-170,36)" onmouseover="mouseOverColor(&quot;#669999&quot;)" alt="#669999"><area style="cursor:pointer" shape="poly" coords="63,30,72,34,72,45,63,49,54,45,54,34" onclick="clickColor(&quot;#009999&quot;,-170,54)" onmouseover="mouseOverColor(&quot;#009999&quot;)" alt="#009999"><area style="cursor:pointer" shape="poly" coords="81,30,90,34,90,45,81,49,72,45,72,34" onclick="clickColor(&quot;#33CCCC&quot;,-170,72)" onmouseover="mouseOverColor(&quot;#33CCCC&quot;)" alt="#33CCCC"><area style="cursor:pointer" shape="poly" coords="99,30,108,34,108,45,99,49,90,45,90,34" onclick="clickColor(&quot;#00CCFF&quot;,-170,90)" onmouseover="mouseOverColor(&quot;#00CCFF&quot;)" alt="#00CCFF"><area style="cursor:pointer" shape="poly" coords="117,30,126,34,126,45,117,49,108,45,108,34" onclick="clickColor(&quot;#0099FF&quot;,-170,108)" onmouseover="mouseOverColor(&quot;#0099FF&quot;)" alt="#0099FF"><area style="cursor:pointer" shape="poly" coords="135,30,144,34,144,45,135,49,126,45,126,34" onclick="clickColor(&quot;#0066FF&quot;,-170,126)" onmouseover="mouseOverColor(&quot;#0066FF&quot;)" alt="#0066FF"><area style="cursor:pointer" shape="poly" coords="153,30,162,34,162,45,153,49,144,45,144,34" onclick="clickColor(&quot;#3366FF&quot;,-170,144)" onmouseover="mouseOverColor(&quot;#3366FF&quot;)" alt="#3366FF"><area style="cursor:pointer" shape="poly" coords="171,30,180,34,180,45,171,49,162,45,162,34" onclick="clickColor(&quot;#3333CC&quot;,-170,162)" onmouseover="mouseOverColor(&quot;#3333CC&quot;)" alt="#3333CC"><area style="cursor:pointer" shape="poly" coords="189,30,198,34,198,45,189,49,180,45,180,34" onclick="clickColor(&quot;#666699&quot;,-170,180)" onmouseover="mouseOverColor(&quot;#666699&quot;)" alt="#666699"><area style="cursor:pointer" shape="poly" coords="36,45,45,49,45,60,36,64,27,60,27,49" onclick="clickColor(&quot;#339966&quot;,-155,27)" onmouseover="mouseOverColor(&quot;#339966&quot;)" alt="#339966"><area style="cursor:pointer" shape="poly" coords="54,45,63,49,63,60,54,64,45,60,45,49" onclick="clickColor(&quot;#00CC99&quot;,-155,45)" onmouseover="mouseOverColor(&quot;#00CC99&quot;)" alt="#00CC99"><area style="cursor:pointer" shape="poly" coords="72,45,81,49,81,60,72,64,63,60,63,49" onclick="clickColor(&quot;#00FFCC&quot;,-155,63)" onmouseover="mouseOverColor(&quot;#00FFCC&quot;)" alt="#00FFCC"><area style="cursor:pointer" shape="poly" coords="90,45,99,49,99,60,90,64,81,60,81,49" onclick="clickColor(&quot;#00FFFF&quot;,-155,81)" onmouseover="mouseOverColor(&quot;#00FFFF&quot;)" alt="#00FFFF"><area style="cursor:pointer" shape="poly" coords="108,45,117,49,117,60,108,64,99,60,99,49" onclick="clickColor(&quot;#33CCFF&quot;,-155,99)" onmouseover="mouseOverColor(&quot;#33CCFF&quot;)" alt="#33CCFF"><area style="cursor:pointer" shape="poly" coords="126,45,135,49,135,60,126,64,117,60,117,49" onclick="clickColor(&quot;#3399FF&quot;,-155,117)" onmouseover="mouseOverColor(&quot;#3399FF&quot;)" alt="#3399FF"><area style="cursor:pointer" shape="poly" coords="144,45,153,49,153,60,144,64,135,60,135,49" onclick="clickColor(&quot;#6699FF&quot;,-155,135)" onmouseover="mouseOverColor(&quot;#6699FF&quot;)" alt="#6699FF"><area style="cursor:pointer" shape="poly" coords="162,45,171,49,171,60,162,64,153,60,153,49" onclick="clickColor(&quot;#6666FF&quot;,-155,153)" onmouseover="mouseOverColor(&quot;#6666FF&quot;)" alt="#6666FF"><area style="cursor:pointer" shape="poly" coords="180,45,189,49,189,60,180,64,171,60,171,49" onclick="clickColor(&quot;#6600FF&quot;,-155,171)" onmouseover="mouseOverColor(&quot;#6600FF&quot;)" alt="#6600FF"><area style="cursor:pointer" shape="poly" coords="198,45,207,49,207,60,198,64,189,60,189,49" onclick="clickColor(&quot;#6600CC&quot;,-155,189)" onmouseover="mouseOverColor(&quot;#6600CC&quot;)" alt="#6600CC"><area style="cursor:pointer" shape="poly" coords="27,60,36,64,36,75,27,79,18,75,18,64" onclick="clickColor(&quot;#339933&quot;,-140,18)" onmouseover="mouseOverColor(&quot;#339933&quot;)" alt="#339933"><area style="cursor:pointer" shape="poly" coords="45,60,54,64,54,75,45,79,36,75,36,64" onclick="clickColor(&quot;#00CC66&quot;,-140,36)" onmouseover="mouseOverColor(&quot;#00CC66&quot;)" alt="#00CC66"><area style="cursor:pointer" shape="poly" coords="63,60,72,64,72,75,63,79,54,75,54,64" onclick="clickColor(&quot;#00FF99&quot;,-140,54)" onmouseover="mouseOverColor(&quot;#00FF99&quot;)" alt="#00FF99"><area style="cursor:pointer" shape="poly" coords="81,60,90,64,90,75,81,79,72,75,72,64" onclick="clickColor(&quot;#66FFCC&quot;,-140,72)" onmouseover="mouseOverColor(&quot;#66FFCC&quot;)" alt="#66FFCC"><area style="cursor:pointer" shape="poly" coords="99,60,108,64,108,75,99,79,90,75,90,64" onclick="clickColor(&quot;#66FFFF&quot;,-140,90)" onmouseover="mouseOverColor(&quot;#66FFFF&quot;)" alt="#66FFFF"><area style="cursor:pointer" shape="poly" coords="117,60,126,64,126,75,117,79,108,75,108,64" onclick="clickColor(&quot;#66CCFF&quot;,-140,108)" onmouseover="mouseOverColor(&quot;#66CCFF&quot;)" alt="#66CCFF"><area style="cursor:pointer" shape="poly" coords="135,60,144,64,144,75,135,79,126,75,126,64" onclick="clickColor(&quot;#99CCFF&quot;,-140,126)" onmouseover="mouseOverColor(&quot;#99CCFF&quot;)" alt="#99CCFF"><area style="cursor:pointer" shape="poly" coords="153,60,162,64,162,75,153,79,144,75,144,64" onclick="clickColor(&quot;#9999FF&quot;,-140,144)" onmouseover="mouseOverColor(&quot;#9999FF&quot;)" alt="#9999FF"><area style="cursor:pointer" shape="poly" coords="171,60,180,64,180,75,171,79,162,75,162,64" onclick="clickColor(&quot;#9966FF&quot;,-140,162)" onmouseover="mouseOverColor(&quot;#9966FF&quot;)" alt="#9966FF"><area style="cursor:pointer" shape="poly" coords="189,60,198,64,198,75,189,79,180,75,180,64" onclick="clickColor(&quot;#9933FF&quot;,-140,180)" onmouseover="mouseOverColor(&quot;#9933FF&quot;)" alt="#9933FF"><area style="cursor:pointer" shape="poly" coords="207,60,216,64,216,75,207,79,198,75,198,64" onclick="clickColor(&quot;#9900FF&quot;,-140,198)" onmouseover="mouseOverColor(&quot;#9900FF&quot;)" alt="#9900FF"><area style="cursor:pointer" shape="poly" coords="18,75,27,79,27,90,18,94,9,90,9,79" onclick="clickColor(&quot;#006600&quot;,-125,9)" onmouseover="mouseOverColor(&quot;#006600&quot;)" alt="#006600"><area style="cursor:pointer" shape="poly" coords="36,75,45,79,45,90,36,94,27,90,27,79" onclick="clickColor(&quot;#00CC00&quot;,-125,27)" onmouseover="mouseOverColor(&quot;#00CC00&quot;)" alt="#00CC00"><area style="cursor:pointer" shape="poly" coords="54,75,63,79,63,90,54,94,45,90,45,79" onclick="clickColor(&quot;#00FF00&quot;,-125,45)" onmouseover="mouseOverColor(&quot;#00FF00&quot;)" alt="#00FF00"><area style="cursor:pointer" shape="poly" coords="72,75,81,79,81,90,72,94,63,90,63,79" onclick="clickColor(&quot;#66FF99&quot;,-125,63)" onmouseover="mouseOverColor(&quot;#66FF99&quot;)" alt="#66FF99"><area style="cursor:pointer" shape="poly" coords="90,75,99,79,99,90,90,94,81,90,81,79" onclick="clickColor(&quot;#99FFCC&quot;,-125,81)" onmouseover="mouseOverColor(&quot;#99FFCC&quot;)" alt="#99FFCC"><area style="cursor:pointer" shape="poly" coords="108,75,117,79,117,90,108,94,99,90,99,79" onclick="clickColor(&quot;#CCFFFF&quot;,-125,99)" onmouseover="mouseOverColor(&quot;#CCFFFF&quot;)" alt="#CCFFFF"><area style="cursor:pointer" shape="poly" coords="126,75,135,79,135,90,126,94,117,90,117,79" onclick="clickColor(&quot;#CCCCFF&quot;,-125,117)" onmouseover="mouseOverColor(&quot;#CCCCFF&quot;)" alt="#CCCCFF"><area style="cursor:pointer" shape="poly" coords="144,75,153,79,153,90,144,94,135,90,135,79" onclick="clickColor(&quot;#CC99FF&quot;,-125,135)" onmouseover="mouseOverColor(&quot;#CC99FF&quot;)" alt="#CC99FF"><area style="cursor:pointer" shape="poly" coords="162,75,171,79,171,90,162,94,153,90,153,79" onclick="clickColor(&quot;#CC66FF&quot;,-125,153)" onmouseover="mouseOverColor(&quot;#CC66FF&quot;)" alt="#CC66FF"><area style="cursor:pointer" shape="poly" coords="180,75,189,79,189,90,180,94,171,90,171,79" onclick="clickColor(&quot;#CC33FF&quot;,-125,171)" onmouseover="mouseOverColor(&quot;#CC33FF&quot;)" alt="#CC33FF"><area style="cursor:pointer" shape="poly" coords="198,75,207,79,207,90,198,94,189,90,189,79" onclick="clickColor(&quot;#CC00FF&quot;,-125,189)" onmouseover="mouseOverColor(&quot;#CC00FF&quot;)" alt="#CC00FF"><area style="cursor:pointer" shape="poly" coords="216,75,225,79,225,90,216,94,207,90,207,79" onclick="clickColor(&quot;#9900CC&quot;,-125,207)" onmouseover="mouseOverColor(&quot;#9900CC&quot;)" alt="#9900CC"><area style="cursor:pointer" shape="poly" coords="9,90,18,94,18,105,9,109,0,105,0,94" onclick="clickColor(&quot;#003300&quot;,-110,0)" onmouseover="mouseOverColor(&quot;#003300&quot;)" alt="#003300"><area style="cursor:pointer" shape="poly" coords="27,90,36,94,36,105,27,109,18,105,18,94" onclick="clickColor(&quot;#009933&quot;,-110,18)" onmouseover="mouseOverColor(&quot;#009933&quot;)" alt="#009933"><area style="cursor:pointer" shape="poly" coords="45,90,54,94,54,105,45,109,36,105,36,94" onclick="clickColor(&quot;#33CC33&quot;,-110,36)" onmouseover="mouseOverColor(&quot;#33CC33&quot;)" alt="#33CC33"><area style="cursor:pointer" shape="poly" coords="63,90,72,94,72,105,63,109,54,105,54,94" onclick="clickColor(&quot;#66FF66&quot;,-110,54)" onmouseover="mouseOverColor(&quot;#66FF66&quot;)" alt="#66FF66"><area style="cursor:pointer" shape="poly" coords="81,90,90,94,90,105,81,109,72,105,72,94" onclick="clickColor(&quot;#99FF99&quot;,-110,72)" onmouseover="mouseOverColor(&quot;#99FF99&quot;)" alt="#99FF99"><area style="cursor:pointer" shape="poly" coords="99,90,108,94,108,105,99,109,90,105,90,94" onclick="clickColor(&quot;#CCFFCC&quot;,-110,90)" onmouseover="mouseOverColor(&quot;#CCFFCC&quot;)" alt="#CCFFCC"><area style="cursor:pointer" shape="poly" coords="117,90,126,94,126,105,117,109,108,105,108,94" onclick="clickColor(&quot;#FFFFFF&quot;,-110,108)" onmouseover="mouseOverColor(&quot;#FFFFFF&quot;)" alt="#FFFFFF"><area style="cursor:pointer" shape="poly" coords="135,90,144,94,144,105,135,109,126,105,126,94" onclick="clickColor(&quot;#FFCCFF&quot;,-110,126)" onmouseover="mouseOverColor(&quot;#FFCCFF&quot;)" alt="#FFCCFF"><area style="cursor:pointer" shape="poly" coords="153,90,162,94,162,105,153,109,144,105,144,94" onclick="clickColor(&quot;#FF99FF&quot;,-110,144)" onmouseover="mouseOverColor(&quot;#FF99FF&quot;)" alt="#FF99FF"><area style="cursor:pointer" shape="poly" coords="171,90,180,94,180,105,171,109,162,105,162,94" onclick="clickColor(&quot;#FF66FF&quot;,-110,162)" onmouseover="mouseOverColor(&quot;#FF66FF&quot;)" alt="#FF66FF"><area style="cursor:pointer" shape="poly" coords="189,90,198,94,198,105,189,109,180,105,180,94" onclick="clickColor(&quot;#FF00FF&quot;,-110,180)" onmouseover="mouseOverColor(&quot;#FF00FF&quot;)" alt="#FF00FF"><area style="cursor:pointer" shape="poly" coords="207,90,216,94,216,105,207,109,198,105,198,94" onclick="clickColor(&quot;#CC00CC&quot;,-110,198)" onmouseover="mouseOverColor(&quot;#CC00CC&quot;)" alt="#CC00CC"><area style="cursor:pointer" shape="poly" coords="225,90,234,94,234,105,225,109,216,105,216,94" onclick="clickColor(&quot;#660066&quot;,-110,216)" onmouseover="mouseOverColor(&quot;#660066&quot;)" alt="#660066"><area style="cursor:pointer" shape="poly" coords="18,105,27,109,27,120,18,124,9,120,9,109" onclick="clickColor(&quot;#336600&quot;,-95,9)" onmouseover="mouseOverColor(&quot;#336600&quot;)" alt="#336600"><area style="cursor:pointer" shape="poly" coords="36,105,45,109,45,120,36,124,27,120,27,109" onclick="clickColor(&quot;#009900&quot;,-95,27)" onmouseover="mouseOverColor(&quot;#009900&quot;)" alt="#009900"><area style="cursor:pointer" shape="poly" coords="54,105,63,109,63,120,54,124,45,120,45,109" onclick="clickColor(&quot;#66FF33&quot;,-95,45)" onmouseover="mouseOverColor(&quot;#66FF33&quot;)" alt="#66FF33"><area style="cursor:pointer" shape="poly" coords="72,105,81,109,81,120,72,124,63,120,63,109" onclick="clickColor(&quot;#99FF66&quot;,-95,63)" onmouseover="mouseOverColor(&quot;#99FF66&quot;)" alt="#99FF66"><area style="cursor:pointer" shape="poly" coords="90,105,99,109,99,120,90,124,81,120,81,109" onclick="clickColor(&quot;#CCFF99&quot;,-95,81)" onmouseover="mouseOverColor(&quot;#CCFF99&quot;)" alt="#CCFF99"><area style="cursor:pointer" shape="poly" coords="108,105,117,109,117,120,108,124,99,120,99,109" onclick="clickColor(&quot;#FFFFCC&quot;,-95,99)" onmouseover="mouseOverColor(&quot;#FFFFCC&quot;)" alt="#FFFFCC"><area style="cursor:pointer" shape="poly" coords="126,105,135,109,135,120,126,124,117,120,117,109" onclick="clickColor(&quot;#FFCCCC&quot;,-95,117)" onmouseover="mouseOverColor(&quot;#FFCCCC&quot;)" alt="#FFCCCC"><area style="cursor:pointer" shape="poly" coords="144,105,153,109,153,120,144,124,135,120,135,109" onclick="clickColor(&quot;#FF99CC&quot;,-95,135)" onmouseover="mouseOverColor(&quot;#FF99CC&quot;)" alt="#FF99CC"><area style="cursor:pointer" shape="poly" coords="162,105,171,109,171,120,162,124,153,120,153,109" onclick="clickColor(&quot;#FF66CC&quot;,-95,153)" onmouseover="mouseOverColor(&quot;#FF66CC&quot;)" alt="#FF66CC"><area style="cursor:pointer" shape="poly" coords="180,105,189,109,189,120,180,124,171,120,171,109" onclick="clickColor(&quot;#FF33CC&quot;,-95,171)" onmouseover="mouseOverColor(&quot;#FF33CC&quot;)" alt="#FF33CC"><area style="cursor:pointer" shape="poly" coords="198,105,207,109,207,120,198,124,189,120,189,109" onclick="clickColor(&quot;#CC0099&quot;,-95,189)" onmouseover="mouseOverColor(&quot;#CC0099&quot;)" alt="#CC0099"><area style="cursor:pointer" shape="poly" coords="216,105,225,109,225,120,216,124,207,120,207,109" onclick="clickColor(&quot;#993399&quot;,-95,207)" onmouseover="mouseOverColor(&quot;#993399&quot;)" alt="#993399"><area style="cursor:pointer" shape="poly" coords="27,120,36,124,36,135,27,139,18,135,18,124" onclick="clickColor(&quot;#333300&quot;,-80,18)" onmouseover="mouseOverColor(&quot;#333300&quot;)" alt="#333300"><area style="cursor:pointer" shape="poly" coords="45,120,54,124,54,135,45,139,36,135,36,124" onclick="clickColor(&quot;#669900&quot;,-80,36)" onmouseover="mouseOverColor(&quot;#669900&quot;)" alt="#669900"><area style="cursor:pointer" shape="poly" coords="63,120,72,124,72,135,63,139,54,135,54,124" onclick="clickColor(&quot;#99FF33&quot;,-80,54)" onmouseover="mouseOverColor(&quot;#99FF33&quot;)" alt="#99FF33"><area style="cursor:pointer" shape="poly" coords="81,120,90,124,90,135,81,139,72,135,72,124" onclick="clickColor(&quot;#CCFF66&quot;,-80,72)" onmouseover="mouseOverColor(&quot;#CCFF66&quot;)" alt="#CCFF66"><area style="cursor:pointer" shape="poly" coords="99,120,108,124,108,135,99,139,90,135,90,124" onclick="clickColor(&quot;#FFFF99&quot;,-80,90)" onmouseover="mouseOverColor(&quot;#FFFF99&quot;)" alt="#FFFF99"><area style="cursor:pointer" shape="poly" coords="117,120,126,124,126,135,117,139,108,135,108,124" onclick="clickColor(&quot;#FFCC99&quot;,-80,108)" onmouseover="mouseOverColor(&quot;#FFCC99&quot;)" alt="#FFCC99"><area style="cursor:pointer" shape="poly" coords="135,120,144,124,144,135,135,139,126,135,126,124" onclick="clickColor(&quot;#FF9999&quot;,-80,126)" onmouseover="mouseOverColor(&quot;#FF9999&quot;)" alt="#FF9999"><area style="cursor:pointer" shape="poly" coords="153,120,162,124,162,135,153,139,144,135,144,124" onclick="clickColor(&quot;#FF6699&quot;,-80,144)" onmouseover="mouseOverColor(&quot;#FF6699&quot;)" alt="#FF6699"><area style="cursor:pointer" shape="poly" coords="171,120,180,124,180,135,171,139,162,135,162,124" onclick="clickColor(&quot;#FF3399&quot;,-80,162)" onmouseover="mouseOverColor(&quot;#FF3399&quot;)" alt="#FF3399"><area style="cursor:pointer" shape="poly" coords="189,120,198,124,198,135,189,139,180,135,180,124" onclick="clickColor(&quot;#CC3399&quot;,-80,180)" onmouseover="mouseOverColor(&quot;#CC3399&quot;)" alt="#CC3399"><area style="cursor:pointer" shape="poly" coords="207,120,216,124,216,135,207,139,198,135,198,124" onclick="clickColor(&quot;#990099&quot;,-80,198)" onmouseover="mouseOverColor(&quot;#990099&quot;)" alt="#990099"><area style="cursor:pointer" shape="poly" coords="36,135,45,139,45,150,36,154,27,150,27,139" onclick="clickColor(&quot;#666633&quot;,-65,27)" onmouseover="mouseOverColor(&quot;#666633&quot;)" alt="#666633"><area style="cursor:pointer" shape="poly" coords="54,135,63,139,63,150,54,154,45,150,45,139" onclick="clickColor(&quot;#99CC00&quot;,-65,45)" onmouseover="mouseOverColor(&quot;#99CC00&quot;)" alt="#99CC00"><area style="cursor:pointer" shape="poly" coords="72,135,81,139,81,150,72,154,63,150,63,139" onclick="clickColor(&quot;#CCFF33&quot;,-65,63)" onmouseover="mouseOverColor(&quot;#CCFF33&quot;)" alt="#CCFF33"><area style="cursor:pointer" shape="poly" coords="90,135,99,139,99,150,90,154,81,150,81,139" onclick="clickColor(&quot;#FFFF66&quot;,-65,81)" onmouseover="mouseOverColor(&quot;#FFFF66&quot;)" alt="#FFFF66"><area style="cursor:pointer" shape="poly" coords="108,135,117,139,117,150,108,154,99,150,99,139" onclick="clickColor(&quot;#FFCC66&quot;,-65,99)" onmouseover="mouseOverColor(&quot;#FFCC66&quot;)" alt="#FFCC66"><area style="cursor:pointer" shape="poly" coords="126,135,135,139,135,150,126,154,117,150,117,139" onclick="clickColor(&quot;#FF9966&quot;,-65,117)" onmouseover="mouseOverColor(&quot;#FF9966&quot;)" alt="#FF9966"><area style="cursor:pointer" shape="poly" coords="144,135,153,139,153,150,144,154,135,150,135,139" onclick="clickColor(&quot;#FF6666&quot;,-65,135)" onmouseover="mouseOverColor(&quot;#FF6666&quot;)" alt="#FF6666"><area style="cursor:pointer" shape="poly" coords="162,135,171,139,171,150,162,154,153,150,153,139" onclick="clickColor(&quot;#FF0066&quot;,-65,153)" onmouseover="mouseOverColor(&quot;#FF0066&quot;)" alt="#FF0066"><area style="cursor:pointer" shape="poly" coords="180,135,189,139,189,150,180,154,171,150,171,139" onclick="clickColor(&quot;#CC6699&quot;,-65,171)" onmouseover="mouseOverColor(&quot;#CC6699&quot;)" alt="#CC6699"><area style="cursor:pointer" shape="poly" coords="198,135,207,139,207,150,198,154,189,150,189,139" onclick="clickColor(&quot;#993366&quot;,-65,189)" onmouseover="mouseOverColor(&quot;#993366&quot;)" alt="#993366"><area style="cursor:pointer" shape="poly" coords="45,150,54,154,54,165,45,169,36,165,36,154" onclick="clickColor(&quot;#999966&quot;,-50,36)" onmouseover="mouseOverColor(&quot;#999966&quot;)" alt="#999966"><area style="cursor:pointer" shape="poly" coords="63,150,72,154,72,165,63,169,54,165,54,154" onclick="clickColor(&quot;#CCCC00&quot;,-50,54)" onmouseover="mouseOverColor(&quot;#CCCC00&quot;)" alt="#CCCC00"><area style="cursor:pointer" shape="poly" coords="81,150,90,154,90,165,81,169,72,165,72,154" onclick="clickColor(&quot;#FFFF00&quot;,-50,72)" onmouseover="mouseOverColor(&quot;#FFFF00&quot;)" alt="#FFFF00"><area style="cursor:pointer" shape="poly" coords="99,150,108,154,108,165,99,169,90,165,90,154" onclick="clickColor(&quot;#FFCC00&quot;,-50,90)" onmouseover="mouseOverColor(&quot;#FFCC00&quot;)" alt="#FFCC00"><area style="cursor:pointer" shape="poly" coords="117,150,126,154,126,165,117,169,108,165,108,154" onclick="clickColor(&quot;#FF9933&quot;,-50,108)" onmouseover="mouseOverColor(&quot;#FF9933&quot;)" alt="#FF9933"><area style="cursor:pointer" shape="poly" coords="135,150,144,154,144,165,135,169,126,165,126,154" onclick="clickColor(&quot;#FF6600&quot;,-50,126)" onmouseover="mouseOverColor(&quot;#FF6600&quot;)" alt="#FF6600"><area style="cursor:pointer" shape="poly" coords="153,150,162,154,162,165,153,169,144,165,144,154" onclick="clickColor(&quot;#FF5050&quot;,-50,144)" onmouseover="mouseOverColor(&quot;#FF5050&quot;)" alt="#FF5050"><area style="cursor:pointer" shape="poly" coords="171,150,180,154,180,165,171,169,162,165,162,154" onclick="clickColor(&quot;#CC0066&quot;,-50,162)" onmouseover="mouseOverColor(&quot;#CC0066&quot;)" alt="#CC0066"><area style="cursor:pointer" shape="poly" coords="189,150,198,154,198,165,189,169,180,165,180,154" onclick="clickColor(&quot;#660033&quot;,-50,180)" onmouseover="mouseOverColor(&quot;#660033&quot;)" alt="#660033"><area style="cursor:pointer" shape="poly" coords="54,165,63,169,63,180,54,184,45,180,45,169" onclick="clickColor(&quot;#996633&quot;,-35,45)" onmouseover="mouseOverColor(&quot;#996633&quot;)" alt="#996633"><area style="cursor:pointer" shape="poly" coords="72,165,81,169,81,180,72,184,63,180,63,169" onclick="clickColor(&quot;#CC9900&quot;,-35,63)" onmouseover="mouseOverColor(&quot;#CC9900&quot;)" alt="#CC9900"><area style="cursor:pointer" shape="poly" coords="90,165,99,169,99,180,90,184,81,180,81,169" onclick="clickColor(&quot;#FF9900&quot;,-35,81)" onmouseover="mouseOverColor(&quot;#FF9900&quot;)" alt="#FF9900"><area style="cursor:pointer" shape="poly" coords="108,165,117,169,117,180,108,184,99,180,99,169" onclick="clickColor(&quot;#CC6600&quot;,-35,99)" onmouseover="mouseOverColor(&quot;#CC6600&quot;)" alt="#CC6600"><area style="cursor:pointer" shape="poly" coords="126,165,135,169,135,180,126,184,117,180,117,169" onclick="clickColor(&quot;#FF3300&quot;,-35,117)" onmouseover="mouseOverColor(&quot;#FF3300&quot;)" alt="#FF3300"><area style="cursor:pointer" shape="poly" coords="144,165,153,169,153,180,144,184,135,180,135,169" onclick="clickColor(&quot;#FF0000&quot;,-35,135)" onmouseover="mouseOverColor(&quot;#FF0000&quot;)" alt="#FF0000"><area style="cursor:pointer" shape="poly" coords="162,165,171,169,171,180,162,184,153,180,153,169" onclick="clickColor(&quot;#CC0000&quot;,-35,153)" onmouseover="mouseOverColor(&quot;#CC0000&quot;)" alt="#CC0000"><area style="cursor:pointer" shape="poly" coords="180,165,189,169,189,180,180,184,171,180,171,169" onclick="clickColor(&quot;#990033&quot;,-35,171)" onmouseover="mouseOverColor(&quot;#990033&quot;)" alt="#990033"><area style="cursor:pointer" shape="poly" coords="63,180,72,184,72,195,63,199,54,195,54,184" onclick="clickColor(&quot;#663300&quot;,-20,54)" onmouseover="mouseOverColor(&quot;#663300&quot;)" alt="#663300"><area style="cursor:pointer" shape="poly" coords="81,180,90,184,90,195,81,199,72,195,72,184" onclick="clickColor(&quot;#996600&quot;,-20,72)" onmouseover="mouseOverColor(&quot;#996600&quot;)" alt="#996600"><area style="cursor:pointer" shape="poly" coords="99,180,108,184,108,195,99,199,90,195,90,184" onclick="clickColor(&quot;#CC3300&quot;,-20,90)" onmouseover="mouseOverColor(&quot;#CC3300&quot;)" alt="#CC3300"><area style="cursor:pointer" shape="poly" coords="117,180,126,184,126,195,117,199,108,195,108,184" onclick="clickColor(&quot;#993300&quot;,-20,108)" onmouseover="mouseOverColor(&quot;#993300&quot;)" alt="#993300"><area style="cursor:pointer" shape="poly" coords="135,180,144,184,144,195,135,199,126,195,126,184" onclick="clickColor(&quot;#990000&quot;,-20,126)" onmouseover="mouseOverColor(&quot;#990000&quot;)" alt="#990000"><area style="cursor:pointer" shape="poly" coords="153,180,162,184,162,195,153,199,144,195,144,184" onclick="clickColor(&quot;#800000&quot;,-20,144)" onmouseover="mouseOverColor(&quot;#800000&quot;)" alt="#800000"><area style="cursor:pointer" shape="poly" coords="171,180,180,184,180,195,171,199,162,195,162,184" onclick="clickColor(&quot;#993333&quot;,-20,162)" onmouseover="mouseOverColor(&quot;#993333&quot;)" alt="#993333"></map> 
            <script>
var thistop = "";
var thisleft = "";
</script> 
            <div id="selectedhexagon" style="visibility:hidden;position:relative;width:21px;height:21px;background-image:url(images/img_selectedcolor.gif&quot;)"></div> 
            <div id="divpreview">
             &nbsp;
            </div> 
            <h3>或输入颜色值:</h3> 
            <div id="entercolorDIV"> 
             <input type="text" id="entercolor" placeholder="颜色值" onkeydown="submitOnEnter(event)" onfocus="clearWrongInput();" style="z-index:0;">
             <button type="button" onclick="clickColor(0,-1,-1)" style="z-index:0;">OK</button> 
            </div> 
            <div id="wronginputDIV">
             Wrong Input
            </div> 
            <br> 
            <div id="html5DIV"> 
             <h3>或使用 HTML5:</h3> 
             <input type="color" id="html5colorpicker" onchange="clickColor(0, -1, -1, 5)" value="#ff0000" style="width:85%;"> 
            </div> 
            <br> 
            <br> 
           </div> </td> 
          <td width="33%"><h3>选择的颜色:</h3> 
           <div id="selectedcolor" style="font-size: 18px !important;"> 
            <br>
            <br> 
            <span style="color: #000 !important;">黑色文本</span>
            <br>
            <br> 
            <span style="color: #000 !important;text-shadow: 1px 1px 0 #444;">阴影</span>
            <br>
            <br> 
            <span style="color: #fff !important;">白色文本</span>
            <br>
            <br> 
            <span style="color: #fff !important;text-shadow: 1px 1px 0 #444;">阴影</span> 
           </div> 
           <div id="colornamDIV" style="margin-top: 16px !important;"></div> 
           <div>
            <b><span id="colorhexDIV"></span></b>
           </div> 
           <div id="colorrgbDIV"></div> 
           <div id="colorhslDIV"></div> 
           <div id="colorhsvDIV"></div> </td> 
          <td>
           <div id="lumtopcontainer"></div> </td> 
         </tr> 
        </tbody>
       </table> 
       <hr> 
       <div id="huecontainer"></div> 
       <hr> 
       <div id="hslsatcontainer"></div> 
       <hr> 
       <div id="hsllumcontainer"></div> 
       <hr> 
       <div id="hsvsatcontainer"></div> 
       <hr> 
       <div id="hsvvalcontainer"></div> 
       <hr> 
       <hr> 
       <h2>RGB (Red, Green, Blue)</h2> 
       <table class="reference"> 
        <tbody>
         <tr> 
          <th>Red</th> 
          <th>Green</th> 
          <th>Blue</th> 
         </tr> 
         <tr> 
          <td id="valRed"></td> 
          <td id="valGreen"></td> 
          <td id="valBlue"></td> 
         </tr> 
         <tr> 
          <td id="red" style="height:50px;background-color:red"></td> 
          <td id="green" style="background-color:green"></td> 
          <td id="blue" style="background-color:blue"></td> 
         </tr> 
         <tr> 
          <td> <input onchange="changeRed(this.value)" type="range" id="slideRed" name="slideRed" min="0" max="255"> </td> 
          <td> <input onchange="changeGreen(this.value)" type="range" id="slideGreen" name="slideGreen" min="0" max="255"> </td> 
          <td> <input onchange="changeBlue(this.value)" type="range" id="slideBlue" name="slideBlue" min="0" max="255"> </td> 
         </tr> 
        </tbody>
       </table> 
       <div id="change" style="height:50px"></div> 
       <div id="fixed" style="height:50px"></div> 
       <div style="text-align: center !important;"> 
        <span id="changetxt"></span>&nbsp;&nbsp;
        <span id="changetxthex"></span> 
       </div> 
       <script>
if ("FF0000" == "FF0000") {
clickColor("FF0000", -35, 135);
} else {
clickColor("FF0000", -1, -1);
}
if (thistop != "") {
document.getElementById("selectedhexagon").style.top = thistop + "px";
document.getElementById("selectedhexagon").style.left = thisleft + "px";
document.getElementById("selectedhexagon").style.visibility = "visible";
}
</script> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <!--footer start--> 
  <div class="s-footer"> 
   <div class="s-footer-bottom"> 
   </div> 
  </div> 
  <!--footer end--> 
  <script src="js/commonfooter.js" type="text/javascript"></script>  
 </body>
</html>